/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="naowu-content">
    <Title title="劳务排名"></Title>
    <div class="main">
      <div class="scroll-header">
        <span>排名</span>
        <span>公司名称</span>
        <!-- <span>征收面积</span> -->
        <span>征收户数</span>
      </div>
      <div class="scroll-box">
        <ul :class="['scroll-content', animate ? 'anim' : '']" ref="con1">
          <li v-for="(item,index) in data" :key="index">
            <span>{{item.rank}}</span>
            <span>{{item.shortname}}</span>
            <span>{{item.number}}</span>
            <!-- <span>{{item.user}}</span> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
export default {
  props: {
    laowuRank: Array
  },
  data() {
    return {
      data: this.laowuRank || [],
      animate: false,
      index: 0,
      timeout: {}
    };
  },
  watch: {
    laowuRank: function(data) {
      const self = this;
      this.data = data;
      self.startScroll();
    }
  },

  methods: {
    scroll() {
      this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.data.push(this.data[0]); // 将数组的第一个元素添加到数组的
        this.data.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 500);
    },
    startScroll() {
      let self = this;
      window.clearInterval(self.timeout);
      if (this.data.length > 4) {
        self.timeout = setInterval(this.scroll, 1000);
      }
    }
  },
  mounted() {
    this.startScroll();
  },
  components: {
    Title
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
.naowu-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .main {
    width: 100%;
    height: 80%;
    position: relative;
    overflow: hidden;
  }
}

.scroll-header {
  height: 2vw;
  line-height: 2vw;
  width: 100%;
  span {
    display: inline-block;
    width: calc(~"33.3333% - 2px");
    height: 2vw;
    line-height: 2vw;
    margin-right: 2px;
    background: @font-regular;
  }
}
.scroll-box {
  height: calc(~"100% - 2vw");
  width: 100%;
  position: relative;
  overflow: hidden;
}
.scroll-content {
  width: 100%;
  height: 100%;
  // transition: all 0.5s;
  li {
    height: 2vw;
    line-height: 2vw;
    overflow: hidden;
    border-bottom: 1px solid @gray;
    span {
      display: inline-block;
      width: calc(~"33.3333% - 2px");
      height: 2vw;
      line-height: 2vw;
      margin-right: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    // &:nth-child(2n) {
    //   span {
    //     background: @font-second;
    //   }
    // }
  }
}

.anim {
  transition: all 0.5s;
  margin-top: -2vw;
}
</style>
